<template>
    <!-- 藏气练习 -->
    <div class="cangqi-test-container">
        <div class="zhi" @click="refersh">{{ zhiList[currentZhiIndex] }}</div>
        <div id="gan-list" class="cell-list">
            <div v-for="(item, index) in ganList" :key="index" @click="selectGan(index)"
                :class="ganStatusList[index] === -1 ? 'cell-normal' : ganStatusList[index] === 3 ? 'cell-error' : ('cell-right' + ganStatusList[index])">
                {{ item }}
            </div>
        </div>
        <div class="data-text"
            @click="showImage(['https://mp-aac0e8f6-ad5a-4992-aecf-d590a570f6a9.cdn.bspapp.com/cloudstorage/6ea2bd02-13ca-4e14-a94c-315cb0481414.webp']);">
            资料</div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { showImage } from '@utils';

const ganList = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'];
const zhiList = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
const cangqiList = ['癸', '己癸辛', '甲丙戊', '乙', '戊乙癸', '丙庚戊', '丁己', '己丁乙', '庚壬戊', '辛', '戊辛丁', '壬甲'];

const currentZhiIndex = ref(0); // 当前显示地支的索引
const ganStatusList = ref([-1, -1, -1, -1, -1, -1, -1, -1, -1, -1]);

function selectGan(selectIndex) {
    clearErrorGan();
    let queryIndex = cangqiList[currentZhiIndex.value].indexOf(ganList[selectIndex]);
    if (queryIndex != -1) {
        ganStatusList.value[selectIndex] = queryIndex;
    } else {
        ganStatusList.value[selectIndex] = 3;
    }
}
function clearGan() {
    for (var i = 0; i < 10; i++) {
        ganStatusList.value[i] = -1;
    }
}
function clearErrorGan() {
    for (var i = 0; i < 10; i++) {
        if (ganStatusList.value[i] === 3) {
            ganStatusList.value[i] = -1;
        }
    }
}
function refersh() {
    clearGan();
    if (currentZhiIndex.value < 11) {
        currentZhiIndex.value++;
    } else {
        currentZhiIndex.value = 0;
    }
}
</script>

<style lang="scss" scoped>
.cangqi-test-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.button {
    width: 100%;
    height: 2.5rem;
    margin: .75rem;
    background-color: #f2f2f2;
    border-radius: .2rem;
    color: #666;
    text-align: center;
    line-height: 2.5rem;
}

#gan-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 .75rem;
    margin-top: .75rem;
    flex-wrap: wrap;
    font-size: .75rem;
}

.cell-list>div {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 calc(((100vw - 1.5rem) / 5 - 1.25rem) / 2);
    border-radius: .2rem;
    border: #000 solid .025rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.cell-normal {
    background-color: unset;
}

.cell-error {
    background-color: red;
}

.cell-right0 {
    background-color: green;
}

.cell-right1 {
    background-color: green;
    opacity: 0.6;
}

.cell-right2 {
    background-color: green;
    opacity: 0.3;
}

.zhi {
    font-size: 5rem;
    font-weight: bold;
    margin-top: .75rem;
}

.data-text {
    margin-top: 2rem;
    font-size: .8rem;
}
</style>